大家好，我是一名菜鳥工程師，Chris
今天來到鐵人賽的第七天，CSS 的佈局教學 - Flexbox 彈性盒子

Flexbox(彈性盒子) : 由於每位使用者會使用不同螢幕尺寸的設備，所以需要利用 Flexbox 來調整。它能改變項目的長與高，以便在任何設備都能完整呈現內容

1 彈性容器（Flex container）：通常是包含彈性項目的父元素
給它屬性display: flex; 來啟用 Flexbox

2 彈性項目（Flex item）：容器內的子元素，它們會根據彈性容器的規則進行排列和分佈

3 彈性方向（Flex Direction）：預設情況下，Flex 容器的方向是水平的，但我們可以透過設定flex-direction 屬性來改變，以下是它常用的值

• row：（預設）水平方向，從左到右排列
• row-reverse：水平方向，從右到左排列
• column：垂直方向，從上到下排列
• column-reverse：垂直方向，從下到上排列

flex-direction: row; 
flex-direction: row-reverse; 
flex-direction: column;
flex-direction: column-reverse;

4 對齊方式（Alignment）：可以跟著彈性項目對齊，以下為常見的對齊屬性

• justify-content：水平對齊，值包括flex-start（起始對齊）、flex-end（結束對齊）、center（置中對齊）、space-between（兩端對齊，間距均分）、space-around（兩側對齊，間距均分）等

justify-content: center;

• align-items：垂直對齊，值包括flex-start、flex-end、center、baseline和stretch

align-items: flex-end;

• align-content：多行對齊，當容器內有多行彈性項目時使用，值與justify-content相同

align-content: space-around;

• align-self：設定目前單一彈性項目的對齊

align-self: center;

5 彈性增長和縮小（Flex Grow 和 Flex Shrink）: 使用 flex-grow 和 flex-shrink 屬性來控制彈性項目的增長和縮小

• flex-grow：指定彈性項目在容器內增長的比例。默認值為0，表示不增長
• flex-shrink：指定彈性項目在容器內縮小的比例。默認值為1，表示可以縮小

6 彈性基準（Flex Basis）：可以指定彈性項目在不收縮或伸展時的初始大小。預設值為auto
7 彈性屬性縮寫：可以使用flex屬性縮寫，它包括flex-grow、flex-shrink和flex-basis的值

flex: 1 1 auto;

以下為範例：將3個彈性項目，水平置中對齊

• HTML

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

• CSS

.container {
  display: flex; /* 將容器設為 flexbox 彈性容器 */
  justify-content: center; /* 水平置中對齊 */
  align-items: center; /* 垂直居中對齊 */
}

.item {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 20px;
}

預告：明天會講 Grid(格線佈局)!!!